<template>
    <div class="ImageUploadContent">
        <div class=""
             style="overflow-x: hidden;overflow-y: auto;"
             :style="containerStyle"
        >
            <div class="mr-xs pos-r disp-ib mb-xs border--silver overflow-h"
                 style="border-width: 1px;border-style: solid;"
                 :style="imageContainerStyle"
                 v-for="(item,i) in imageList"
                 :key="i"
            >
                <div class="close-button"
                     @click="removeThumb(i)"
                ><i class="iconfont icon-times"></i></div>
                <img :src="item" alt="" class="wh100p">
            </div>
            <div class="mr-xs pos-r disp-ib mb-xs border--silver overflow-h color-silver  fz-xxg cursor-p add-button "
                 style="border-width: 1px;border-style: solid;"
                 :style="imageContainerStyle"
                 @click="startCropper"

            >
                <div class="flex-box flex-center flex-center-j h100p ">
                    <i class="iconfont icon-plus "></i>
                </div>
            </div>
        </div>
        <image-cropper
                ref="imageCropper"
                :show-button="false"
                @finish="finishUpdate"
                :fixed-number="fixedNumber"
        ></image-cropper>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import ImageCropper from "@/components/ImageCropper"
import ImageModel from "@/project/model/ImageModel"

@Component({
  components: {
    ImageCropper
  }
})
export default class ImageUploadContent extends Vue {
  @Prop({
    default: "120px"
  })
  readonly imageSize!: any
  @Prop({
    default: "300px"
  })
  readonly containerHeight!: any
  @Prop({
    default() {
      return [1, 1]
    }

  })
  readonly fixedNumber!: any
  @Prop({
    default() {
      return []
    }

  })
  readonly list!: any
  imageList: Array<any> = []

  mounted() {
    this.reload()
  }

  reload() {
    'a'.toLowerCase()
  }

  removeThumb(index) {
    this.imageList.splice(index, 1)
  }

  startCropper() {
    (this.$refs.imageCropper as any).start()
  }

  finishUpdate(url) {
    ImageModel.updateImage(url).then(resp => {
      this.imageList.push(resp.full_url)
    })
  }

  @Watch('imageList')
  onImageListChanged(v) {
    this.$emit('change', v)
  }

  @Watch('list')
  onListChanged(v) {
    this.imageList = v
  }

  get imageContainerStyle() {
    return {
      'width': this.imageSize,
      'height': this.imageSize
    }
  }

  get containerStyle() {
    return {
      'height': this.containerHeight
    }
  }

}
</script>

<style lang="less" scoped>
    @import (reference) "~style/all.less";

    .ImageUploadContent {
        .close-button {
            position: absolute;
            top: 0;
            right: 0;
            width: 15px;
            height: 15px;
            .bg-red;
            color: #fff;
            text-align: center;
            line-height: 15px;
            font-size: 10px;
            cursor: pointer;
        }

        .add-button {
            &:hover {
                border-color: @color--gray;
                color: @color--gray;
            }
        }
    }
</style>